<template>
    <view :style="'direction:' + $t('dir')" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
        <navbar :title="$t('dir') == 'rtl' ? 'پىكىر ساندۇقى' : '意见箱'" :back="true" />
        
        <view class="main">
            <view class="feedback-container">
                <!-- پىكىر يېزىش رايونى -->
                <view class="feedback-box">
                    <view class="box-lid" :class="{ 'lid-open': isLidOpen }">
                        <view class="lid-top"></view>
                        <view class="lid-front"></view>
                    </view>
                    <view class="box-container">
                        <view class="textarea-wrapper" :class="{ 'slide-up': isSubmitting, 'slide-down': isError }">
                            <textarea
                                v-model="feedbackContent"
                                :placeholder="$t('dir') == 'rtl' ? 'پىكرىڭىزنى يېزىڭ...' : '请写下您的意见...'"
                                class="feedback-input"
                                maxlength="800"
                                :disabled="isSubmitting"
                            />
                        </view>
                        <view class="word-count">{{ feedbackContent.length }}/800</view>
                        
                    </view>
                </view>

                <!-- يوللاش كۇنۇپكىسى -->
                <view class="submit-btn" @click="submitFeedback" :class="{ 'submitting': isSubmitting }">
                    <u-icon name="arrow-upward" color="#FFFFFF" size="12"></u-icon>
                    <text class="submit-text">{{ $t('dir') == 'rtl' ? 'يوللاش' : '发送' }}</text>
                </view>

                <!-- ئىلھام -->
                <view class="tips-container">
                    <u-icon name="chat" color="#9186ff" size="24"></u-icon>
                    <text class="tips-text">{{ $t('dir') == 'rtl' ? 'سىزنىڭ پىكرىڭىز بىز ئۈچۈن مۇھىم' : '您的建议对我们很重要' }}</text>
                </view>
            </view>
        </view>
           <view class="floating-icon" @click="showHistoryPopup = true">
        <view class="icon-wrapper">
            <u-icon 
                name="email-fill" 
                color="#FFFFFF" 
                size="28"
                custom-style="animation: swinging 2s ease-in-out infinite;"
            ></u-icon>
        </view>
    </view>

    <!-- پىكىر تارىخى پوپاپ -->
    <view class="history-popup" :class="{ 'show': showHistoryPopup }">
        <view class="popup-content">
            <!-- باش قىسمى -->
            <view class="popup-header">
                <text class="header-title">{{ $t('dir') == 'rtl' ? 'پىكىر تارىخى' : '历史建议' }}</text>
                <view class="close-btn" @click="showHistoryPopup = false">
                    <u-icon name="close-circle-fill" color="#666" size="24"></u-icon>
                </view>
            </view>

            <!-- پىكىرلەر تىزىملىكى -->
            <scroll-view scroll-y class="feedback-list">
                <view v-for="(item, index) in feedbackHistory" :key="index" class="feedback-item">
                    <!-- پىكىر مەزمۇنى -->
                    <view class="feedback-content">
                        <view class="user-feedback">
                            <u-icon name="account-fill" size="32" color="#455EF7"></u-icon>
                            <view class="content-box">
                                <text class="feedback-text">{{ item.suggestions }}</text>
                                <text class="feedback-time">{{ item.updated_at }}</text>
                            </view>
                        </view>
                        
                        <!-- ئىدارە جاۋابى -->
                        <view class="admin-reply" v-if="item.returen_suggestions ">
                  
                               
                               
                            <u-icon name="server-man" size="32" color="#ff0000"></u-icon>   
                            <view class="reply-box">
                       <text class="reply-text">{{ item.returen_suggestions  }}</text>
                        
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            feedbackContent: '',
            wechatId: '',
            phoneNumber: '',
            isLidOpen: false,
            isSubmitting: false,
            isError: false,
            showHistoryPopup: false,
            feedbackHistory: []
        }
    },
    onLoad() {
      this.getAdvice();
    },
    onShow() {},
    onPullDownRefresh() {
        uni.stopPullDownRefresh()
    },
    onReachBottom() {},
    methods: {
        async getAdvice(){
            const res = await this.$uniapi('/get_suggestions')
            if(res.code == 200 ){
                console.log(res)
                this.feedbackHistory = res.list || []
            }
             
        },
        async submitFeedback() {
            if (!this.feedbackContent.trim()) {
                uni.showToast({
                    title: this.$t('dir') == 'rtl' ? 'پىكىر يېزىڭ' : '请输入意见',
                    icon: 'none'
                })
                return
            }
            let userThings = uni.getStorageSync('user');

            this.isSubmitting = true
            this.isLidOpen = true
            this.isError = false
            
            try {
                const res = await this.$uniapi('/add_suggestions',{
                    nickname: userThings.nickname,
                    user_id:userThings.id,
                    avatar:userThings.avatar,
                    mobile:userThings.mobile,
                    suggestions: this.feedbackContent
                },'post')
                
                if (res.code == 200) {
                    uni.showToast({
                        title: this.$t('dir') == 'rtl' ? 'رەھمەت' : '感谢您的反馈',
                        icon: 'success'
                    })
                    // مۇۋەپپەقىيەتلىك بولغاندا تېكىستنى تازىلاش
                    setTimeout(() => {
                        this.feedbackContent = ''
                        this.isLidOpen = false
                        this.isSubmitting = false
                    }, 1000)
                }
                if(res.code == 1){  
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            } catch (error) {
                uni.showToast({
                    title: this.$t('dir') == 'rtl' ? 'مەغلۇپ بولدى' : '提交失败',
                    icon: 'none'
                })
                
                // مەغلۇپ بولغاندا تېكىستنى قايتۇرۇش
                this.isError = true
                setTimeout(() => {
                    this.isLidOpen = false
                    this.isSubmitting = false
                    this.isError = false
                }, 300)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.feedback-container {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feedback-box {
    width: 90%;
    position: relative;
    margin-top: 40rpx;
}

.box-lid {
    position: absolute;
    top: -20rpx;
    width: 100%;
    height: 40rpx;
    transition: transform 0.5s ease;
    transform-origin: top;
    z-index: 2;

    &.lid-open {
        transform: rotateX(-180deg);
    }

    .lid-top {
        height: 100%;
        background: #9186ff;
        border-radius: 8rpx 8rpx 0 0;
    }

    .lid-front {
        position: absolute;
        bottom: -10rpx;
        width: 100%;
        height: 10rpx;
        background: #7b73ff;
    }
}

.box-container {
    background: #ffffff;
    border: 4rpx solid #9186ff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.textarea-wrapper {
    position: relative;
    transition: all 0.3s ease;
    transform-origin: center;

    &.slide-up {
        transform: translateY(-100%) scale(0.8);
        opacity: 0;
    }

    &.slide-down {
        animation: shake 0.5s ease-in-out;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10rpx); }
    75% { transform: translateX(10rpx); }
}

.feedback-input {
    width: 100%;
    height: 300rpx;
    font-size: 28rpx;
    line-height: 1.6;
    padding: 20rpx;
    box-sizing: border-box;
    border: none;
    resize: none;
    transition: all 0.3s ease;
}

.word-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
}

.submit-btn {
    margin-top: 40rpx;
    background: #9186ff;
    padding: 20rpx 60rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(145, 134, 255, 0.3);
    transition: all 0.3s ease;

    &.submitting {
        transform: scale(0.95);
        opacity: 0.8;
    }

    &:active {
        transform: scale(0.98);
    }
}

.submit-text {
    color: #ffffff;
    font-size: 32rpx;
    margin-left: 10rpx;
}

.tips-container {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.tips-text {
    margin-left: 10rpx;
    font-size: 26rpx;
    color: #666;
}

.rtl {
    .submit-text {
        margin-right: 10rpx;
        margin-left: 0;
    }
    
    .tips-text {
        margin-right: 10rpx;
        margin-left: 0;
    }
}

.additional-info {
    margin-top: 20rpx;
    border-top: 1px solid #eee;
    padding-top: 20rpx;
}

.input-group {
    margin-bottom: 15rpx;
}

.info-input {
    width: 100%;
    height: 70rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 8rpx;
    background: #f9f9f9;
    
    &:focus {
        border-color: #9186ff;
        background: #fff;
    }
}
.floating-icon {
    position: fixed;
    right: 30rpx;
    bottom: 120rpx;
    z-index: 999;

    .icon-wrapper {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #9186ff, #c0bce7);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(121, 110, 218, 0.4);
    }
}

@keyframes swinging {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-25deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(25deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.history-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -80vh;
    height: 80vh;
    background: #fff;
    border-radius: 40rpx 40rpx 0 0;
    z-index: 1000;
    transition: transform 0.3s ease-out;
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);

    &.show {
        transform: translateY(-100%);
    }
}

.popup-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popup-header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eee;

    .header-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .close-btn {
        padding: 10rpx;
    }
}

.feedback-list {
    flex: 1;
    padding: 30rpx;
    box-sizing: border-box;
}

.feedback-item {
    margin-bottom: 40rpx;
    padding: 20rpx;
    background: #f8f8f8;
    border-radius: 20rpx;
}

.user-feedback {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;

    .content-box {
        flex: 1;
        background: #fff;
        padding: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
}

.admin-reply {
    margin-top: 20rpx;
    padding: 20rpx;
    background: rgb(5 36 255 / 14%);
    border-radius: 16rpx;
    display: flex;
    flex-direction: row-reverse;

    .admin-header {
        display: flex;
        align-items: center;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        .admin-title {
            font-size: 26rpx;
            color: #866bff;
            font-weight: bold;
        }
    }

    .reply-box {
        margin-left: 44rpx;
        padding: 16rpx;
        background: #fff;
        border-radius: 12rpx;
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.1);
    }
}

.feedback-text, .reply-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    display: block;
}

.feedback-time, .reply-time {
    display: block;
    font-size: 24rpx;
    color: #999; 
}

// RTL نۇسخىسى ئۈچۈن
.rtl {
    .admin-reply {
        border-left: none;
 
        
        .reply-box {
            margin-left: 0;
        }
    }
}
</style>
